<template>
  <div class="">
    <el-dialog title="请选择走访类型" :visible.sync="dialogVisible" width="400px">

      <div class="dialog-body">
        <!-- <el-radio-group v-model="radio">
          <el-radio label="1">现场走访</el-radio>
          <el-radio label="2">电话沟通</el-radio>
          <el-radio label="3">微信沟通</el-radio>
        </el-radio-group> -->

        <div class="item" :class="radio == 1 ? 'item_active' : ''" @click="itemClick(1)">
            <i class="iconfont el-pwd icon-chanxuehezuo" style="color: #2b6af7;font-size: 22px;margin-right: 5px;"></i>
            现场走访
        </div>
        <div class="item" :class="radio == 2 ? 'item_active' : ''" @click="itemClick(2)">
            <i class="iconfont el-pwd icon-lianxiwomen" style="color: #2b6af7;font-size: 22px;margin-right: 5px;"></i>
            电话沟通
        </div>
        <div class="item" :class="radio == 3 ? 'item_active' : ''" @click="itemClick(3)">
            <i class="iconfont el-pwd icon-weixin1" style="color: #2b6af7;font-size: 22px;margin-right: 5px;"></i>
            微信沟通
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addZF">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  props: {

  },
  watch: {

  },
  components: {},
  data() {
    return {
      dialogVisible: false,
      radio: 1
    };
  },
  beforeDestroy() { },
  mounted() {
  },
  created() { },
  methods: {
    itemClick(type) {
      this.radio = type; 
    },
    openDialog() {
      this.dialogVisible = true;
    },
    addZF() {
      if (this.radio == 1) {
        this.$router.push("/addWaitvisit");
      } else {
        this.$router.push(`/workVisitTypeAdd?type=${this.radio}`);
      }
      this.dialogVisible = false;
    }
  },
};
</script>

<style lang="scss" scoped>
.dialog-body {
  display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.item {
  width: 300px;
  height: 50px;
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
}
.item:hover {
  background: #2b6af7;
  color: white;
  i {
    color: white !important;
  }
}
.item_active {
  background: #2b6af7;
  color: white !important; 
  i {
    color: white !important;
  }
}

@media (max-width: 750px) {}
</style>
